<template>
  <div class="error-wrap container flex-column">
    <div class="content-error">
      <el-image :src="images.networkError">
        <div slot="placeholder" class="image-slot flex-center flex-column">
          <i class="iconfont el-icon-loading"></i>
          <p>{{ $t("public.loading") }}<span class="dot">...</span></p>
        </div>
        <div slot="error" class="image-slot flex-center error-text">
          <span v-text="$t('router.networkAbnormal')"></span>
        </div>
      </el-image>
      <el-button class="go-back" @click="$router.back(-1)" type="danger">{{
        $t("main.return")
      }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: {
        networkError: require("assets/images/no-network.jpg"),
      },
    };
  },
  components: {},
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.error-wrap {
  // height: calc(100vh - 273px);
  padding-top: 35px;
  .content-error {
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    .el-image {
      width: 100%;
      height: 600px;
      .error-text {
        font-size: 50px;
        text-align: center;
        margin: 150px 0;
      }
    }
    .go-back {
      width: 120px;
      margin: 30px 0;
    }
  }
}
</style>
